<template>
  <view class="bg_img">
    <u-navbar auto-back title="联营分润" title-style="color:#fff" left-icon-color="#fff" bgColor="background:rgba(0,0,0,0)"></u-navbar>
    <view class="main_box">
      <view class="box">
        <u-form labelPosition="left" :model="formData" ref="form1" label-width="90">
          <u-form-item label="联营商名称" prop="proAddress">
            <u-input v-model="formData.province" border="bottom" placeholder="选择省"></u-input>
          </u-form-item>
          <u-form-item label="联系人姓名" prop="name">
            <u-input v-model="formData.name" border="bottom" placeholder="输入姓名"></u-input>
          </u-form-item>
          <u-form-item label="省市区" prop="proAddress" borderBottom>
            <PickRegions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
              <view class="reBox">
                <text :style="regionName ? 'color: #000000;' : 'color: #A9A9A9;'">{{ regionName || "选择省市区" }}</text>
                <u-icon name="arrow-down" color="#C9CDD8"></u-icon>
              </view>
            </PickRegions>
          </u-form-item>
          <u-form-item label="详细地址" prop="address">
            <u-input v-model="formData.address" border="none" placeholder="请输入详细地址"></u-input>
          </u-form-item>
          <u-form-item label="联系人手机" prop="phone">
            <u-input v-model="formData.phone" border="bottom" placeholder="输入手机号"></u-input>
          </u-form-item>
        </u-form>
        <u-button shape="circle" text="提交申请" style="margin-top: 50rpx" @click="saveSubmit" color="#02409a"></u-button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import PickRegions from "../../components/pick-regions/pickRegions.vue";
import { computed, onBeforeMount, ref } from "vue";
const formData = ref({
  name: "",
  province: "",
  phone: "",
  address: "",
  city: "",
  area: "",
});
const region = ref([{ name: "" }]);
const defaultRegionCode = ref("110000");
const regionName = computed(() => region.value.map((item) => item.name).join(" "));
const handleGetRegion = (e: any) => {
  e.forEach((item: any) => {
    if (item.childs) {
      delete item.childs;
    }
  });
  formData.value.province = e[0].name;
  formData.value.city = e[1].name;
  formData.value.area = e[2].name;
  region.value = e;
};
const saveSubmit = async () => {
  console.log(formData.value);
};
</script>

<style lang="less" scoped>
.bg_img {
  padding-top: 80rpx;
  width: 100%;
  height: 100vh;
  background: url(../../static/dlsBg.png) no-repeat;
  background-size: 100% 100%;
}

.main_box {
  padding: 550rpx 48rpx 0;
  position: relative;
  z-index: 99;
  .box {
    padding: 40rpx;
    background: #ffffff;
    border-radius: 32rpx;
    margin-bottom: 40rpx;
  }
}
.u-border-bottom {
  border-bottom-style: none;
}
.reBox {
  width: 50vw;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}
</style>
